<template>
    <div class="goods-option " v-bind:class="{active:panel_show?true:false}" >

        <div class="picker-goods">
            <img class="goods-img" src="http://wq-xshop.cloud.com/attachment/cache//images/global/nopic-small-400x300.jpg" alt="">
            <div class="price" >￥{{matched_option?matched_option.price:raw_price}}</div>
            <div class="stock" v-show="matched_option" >库存{{matched_option?matched_option.stock:''}}件</div>
            <div class="picked-option">
                <p v-show="!matched_option">未选择</p>
                <p v-show="matched_option">已选择：{{matched_option?matched_option.attr:''}}</p>
            </div>
        </div>

        <div class="option-field">
            <div class="option-list">


                <div class="spec" v-for="(spec,key) in specification" >
                    <div class="spec-name">{{spec.name}}</div>
                    <div class="spec-values">
                        <div class="value-item"

                             v-on:click="check_spec_value( spec,value_item )"
                             v-for="value_item in spec.values"
                             v-bind:class="{'active': (spec_checked[spec.name] && spec_checked[spec.name]==value_item.name) }"
                        >
                            {{value_item.name}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="pick-number">
                <div class="key">数量</div>
                <div class="cart-quantity-wrapper">
                    <div id="cart-product-quantity"
                         class="input-group">
                <span class="input-group-btn quantity-down">
                    <button type="button"
                            v-on:click="number_change('-')"
                            class="btn btn-default">-</button>
                </span>
                        <input  type="number" size="2"
                                v-model="goods_number"
                                class="form-control cart-input-quantity">
                        <span  class="input-group-btn quantity-up">
                    <button type="button"
                            v-on:click="number_change('+')"
                            class="btn btn-default">+</button></span>
                    </div>

                </div>
<!--                <div class="sub-number-add hidden">
                    <span class="sub">-</span>
                    <input type="number" min="1"  >
                    <span class="add">+</span>
                </div>-->
            </div>
        </div>


        <div class="btn-check">
            <a class="done" v-on:click="done()">确定</a>
        </div>
    </div>
</template>

<script>

export default{

    props:['notice','show','goods_id', 'raw_price', 'specification','spec_obj','goto'],
    data:function(){

        return {

            panel_show:0,
            spec_arr:[],

            spec_checked:{},
            matched_option:null,
            goods_number:1,
        }
    },


    methods:{

        check_spec_value:function( spec, value ){

            if(this.spec_checked[ spec.name ] == value.name){
                this.$set(this.spec_checked, spec.name, '');
            }else{
                this.$set(this.spec_checked, spec.name, value.name);
            }

            this.match_option();
        },

        number_change : function( flag ){

            this.goods_number = parseInt( this.goods_number);
            if( flag == '+'){
                this.goods_number ++;
            }else{
                this.goods_number --;
            }

            this.goods_number = this.goods_number < 1 ? 1 : this.goods_number;

        },

        match_option:function(){

            var t = this;
            t.matched_option = null;
            this.spec_obj.forEach(function( item ){

                var attr_arr = item.attr.split(',');
                var matched = 1;
                attr_arr.forEach(function( attr ){

                    var key = attr.split(':')[0];
                    var v = attr.split(':')[1];
                    if( t.spec_checked[ key ] != v){
                        matched = 0;
                    }
                });

                if( matched ){
                    t.matched_option = item;
                }

            });

        },

        done:function(){

            var t = this;


            this.match_option();

            if( !this.matched_option ){

                var tips_data = {
                    show:1,
                    message:'请选中规格'
                };

                t.bus.$emit('tips',tips_data);
                return;
            }

            if( this.goto == 'cart' ){
                this.add_to_cart()
            }
            if( this.goto == 'buy' ){
                this.buy()
            }

        },

        add_to_cart:function(){

            //todo 添加到购物车
            var t = this;
            var url = this.config.app_url + '&r=cart.add';
            url += '&product_id='+this.goods_id+'&number=' + this.goods_number;
            url += '&option_id='+this.matched_option.id;

            this.axios.get( url )
                .then(function (res) {

                    if( !res.data.status ){
                        t.panel_show = 0;
                    }

                    if( res.data.description ){
                        //todo 显示 购物车添加提示
                        // t.tips.message = res.data.description;
                        // t.tips.show = 1;

                        var tips_data = {
                            show:1,
                            message:res.data.description
                        };

                        t.bus.$emit('tips',tips_data);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });

        },
        buy:function(){


            var t = this;
            // var url = this.config.app_url + '&r=goods.buy';
            var url = this.config.app_url + '&r=checkout.checkout.goods';
            url += '&goods_id='+this.goods_id+'&number=' + this.goods_number;
            url += '&option_id='+this.matched_option.id;
            this.axios.get( url ).then(function ( res ) {

                if( !res.data.status ){
                    t.$router.push('/checkout');
                }

            }).catch(function(){

            });
        },
    },

    watch:{

        show:function( after, before ){

            console.log( after );
            this.panel_show = after;
            console.log( this.panel_show );
        },

        notice:function( after, before ){

            console.log( after,before );
            this.panel_show = after > before ? 1 : 0;
            console.log( this.panel_show );

        }
    }
}

</script>